<template>
    <div class="LedtContent">
        <div class="form-view">
            <!-- 搜索 -->
            <div class="form-row">
                <div class="form-row-label seach">
                    <i class="el-icon-search" @click="ctgVauleSearch"></i>
                </div>
                <div class="form-row-right-content">
                    <el-input v-model="ctgVaule" placeholder="" class="form-ipt"
                        @keyup.enter.native="ctgVauleSearch"></el-input>
                </div>
            </div>
            <!-- 装置 -->
            <div class="form-row">
                <div class="form-row-label">
                    {{ $t("message.bhView.leftComponents.device") }}
                </div>
                <div class="form-row-right-content">
                    <el-select v-model="valuePlant" :placeholder="$t('message.bhView.label.placeholderSearch')
                        " class="form-ipt" @change="PlantChange()">
                        <el-option v-for="item in plantOptions" :key="item.pltCode" :label="item.pltName"
                            :value="item.pltCode"></el-option>
                    </el-select>
                </div>
            </div>
        </div>

        <!-- 机器番号 -->
        <div class="machine-number">
            <div class="title">
                <span v-if="radio == '1'">P&ID</span>
            </div>
            <div class="machine-number-body">
                <div class="Item" v-for="(Item, index) in drwMgtData" :key="Item.dmgCode"
                    @click="ClickTableRow(Item, index)" :class="index == itemActive ? 'ItemActive' : ''">
                    <div class="ItemID">{{ index + 1 }}</div>
                    <div class="ItemName">
                        {{ Item.macName }}
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部信息 -->
        <div class="bh-footer">
            <div class="bh-footer-msg">
                {{ $t("message.bhView.WallThicknessPattern.number") }}
                8
                {{ $t("message.bhView.WallThicknessPattern.piece") }}
            </div>
            <div class="bh-footer-msg">
                <span>{{
                    $t("message.bhView.WallThicknessPattern.point")
                }}</span>
                8
                {{ $t("message.bhView.WallThicknessPattern.piece") }}
            </div>
        </div>
    </div>
</template>

<script>
import { getPlant, getMachine } from "@/api/api";
import eventBus from "@/eventBus/bus";
// import Template from "../../template.vue";
// import $ from "jquery";
// 导出模块
export default {
    // 模块名字
    name: "LeftContent",
    props: {
        selectNumberListData: [],
    },
    // 模块数据
    data() {
        //数据
        return {
            radio: "1", // mactype 单选
            plantOptions: [], // 装置下拉
            valuePlant: "", // 装置选择值
            drwMgtData: [], // 机器列表
            number: 0, // 机器数量
            itemActive: null, // 选中机器

            ctgVaule: "", // 搜索输入关键字

            leftListRow: {}, // 选中机器

            // 机器构件数组
            macNumberData: [],

            mCheckedMacIdArray: [],

            // 是否处理构件选中事件
            doThingWhenSelectNumber: true,
        };
    },
    // 注册组件
    //     components: { Template },
    // 监听指定值，只有指定值变化，才会触发
    watch: {
        macNumberData(val) {
            this.$nextTick(() => {
                let tempSelectList = [];
                val.forEach((valItem) => {
                    let tempSelect = {};
                    tempSelect.row = valItem;
                    tempSelect.selected = valItem.isSelect;
                    tempSelectList.push(tempSelect);
                });
                this.$refs.multipleTable.toggleRowSelection(tempSelectList);
            });
        },

        mCheckedMacIdArray(nVal, oVal) {
            console.log(`watch mCheckedMacIdArray ---  ---`, nVal);
            this.$emit("checkMacArrayChange", nVal);
        },
    },
    // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
    methods: {
        // 获取装置
        getPlantApi(pageIndex, pageSize, isInit) {
            //     let dataJson = {
            //         pltCode: 0,
            //         platName: "",
            //         pageIndex: pageIndex,
            //         pageSize: pageSize,
            //     };
            //     getPlant(dataJson).then((res) => {
            //         this.plantOptions = [];
            //         if (res.data.code != 0) {
            //             return;
            //         }
            //         this.plantOptions = res.data.data;
            //     });
            let temp = `{"code":0,"msg":"OK","count":7,"data":[{"pltCode":9,"pltName":"サンプル装置","pltAbrv":"DEMO","opeStart":"1980-07-01T00:00:00","minCycl":12,"regStart":"1980-01-01T00:00:00","opeDate":null,"ordr":1,"secCode":1,"crtDate":"2009-01-08T17:32:09","updDate":"2021-12-14T16:44:47","updUser":"admin","secXero":null},{"pltCode":10,"pltName":"巨化検安公司","pltAbrv":"巨化1","opeStart":"1990-10-01T00:00:00","minCycl":12,"regStart":"1990-10-01T00:00:00","opeDate":"1985-01-01T00:00:00","ordr":2,"secCode":0,"crtDate":"2020-10-26T14:05:31","updDate":"2021-12-14T16:44:47","updUser":"admin","secXero":null},{"pltCode":12,"pltName":"テスト森谷","pltAbrv":"略称森谷","opeStart":"2021-08-01T00:00:00","minCycl":12,"regStart":"2021-01-01T00:00:00","opeDate":null,"ordr":3,"secCode":1,"crtDate":"2021-10-04T07:58:29","updDate":"2021-12-14T16:44:47","updUser":"admin","secXero":null},{"pltCode":11,"pltName":"Excel入出力テスト用","pltAbrv":"Excel","opeStart":"1980-01-01T00:00:00","minCycl":12,"regStart":"1980-01-01T00:00:00","opeDate":null,"ordr":4,"secCode":0,"crtDate":"2021-09-28T15:44:47","updDate":"2021-12-14T16:44:47","updUser":"admin","secXero":null},{"pltCode":13,"pltName":"Excel入出力テスト用２","pltAbrv":"テスト２","opeStart":"1990-09-01T00:00:00","minCycl":12,"regStart":"1990-09-01T00:00:00","opeDate":"1985-01-01T00:00:00","ordr":5,"secCode":0,"crtDate":"2021-10-04T16:43:02","updDate":"2021-12-14T16:44:47","updUser":"admin","secXero":null},{"pltCode":15,"pltName":"Excel入出力テスト用３","pltAbrv":"テスト２","opeStart":"1990-09-01T00:00:00","minCycl":12,"regStart":"1990-09-01T00:00:00","opeDate":"1985-01-01T00:00:00","ordr":6,"secCode":0,"crtDate":"2021-10-17T10:35:42","updDate":"2021-12-14T16:44:47","updUser":"admin","secXero":null},{"pltCode":16,"pltName":"機器登録テスト(U3)","pltAbrv":null,"opeStart":"2010-01-01T00:00:00","minCycl":24,"regStart":"2010-01-01T00:00:00","opeDate":null,"ordr":21,"secCode":0,"crtDate":"2021-11-26T13:04:02","updDate":"2021-12-14T16:44:47","updUser":"admin","secXero":null}]}`;
            let tempData = JSON.parse(temp);
            this.plantOptions = tempData.data;

            if (this.$store.state.pidPltCode) {
                this.valuePlant = this.$store.state.pidPltCode;
            } else {
                this.valuePlant = this.plantOptions[0].pltCode;
                this.$store.commit("changePidPltCode", this.valuePlant);
            }

            this.plantOptions.forEach((Item) => {
                if (Item.pltCode == this.valuePlant) {
                    this.$store.commit("changePidPlantName", Item.pltName);
                }
            });
            this.getMachineApi("", this.ctgVaule, "", 1, 1000);
        },
        //获取机器/配管
        getMachineApi(macCode, macName, impCode, pageIndex, pageSize) {
            this.drwMgtData = [];
            this.number = 0;
            // 机器列表异常 通知上层页面选中为空
            this.$store.commit("changePidMacName", "");
            this.$store.commit("changePidMacNameb", "");

            let dataJson = {
                macCode: macCode == "" ? 0 : macCode,
                macName: macName,
                pltCode:
                    this.$store.state.pidPltCode == ""
                        ? 0
                        : this.$store.state.pidPltCode,
                // macType: parseInt(this.$store.state.pidMacType),
                macType: 1,
                ctgCode: 0,
                impCode: impCode == "" ? 0 : impCode,
                lawCode: 0,
                pageIndex: pageIndex,
                pageSize: 9999,
            };
            //     getMachine(dataJson).then((res) => {
            //         this.drwMgtData = [];
            //         this.number = 0;
            //         if (res.data.code != 0) {
            //             // 机器列表异常 通知上层页面选中为空
            //             this.$store.commit("changePidMacName", "");
            //             this.$store.commit("changePidMacNameb", "");
            //             return;
            //         }
            //         this.drwMgtData = res.data.data;
            //         this.number = res.data.count;
            //         this.itemActive = 0;
            //         this.$store.commit(
            //             "changePidMacName",
            //             this.drwMgtData[0].macName
            //         );
            //         this.$store.commit(
            //             "changePidMacNameb",
            //             this.drwMgtData[0].name
            //         );
            //         let data = {
            //             row: this.drwMgtData[0],
            //             data: this.drwMgtData,
            //         };
            //         console.log(data, "---");
            //     });

            let temp = `{"code":0,
                "msg":"OK",
                "count":217,
                "data":[
                        {"pltCode":9,"impCode":0,"macCode":18771,"macName":"P&ID - 1","macType":2,"ctgCode":6,"name":"P-003-01","indoorAddr":null,"indoorID":null,"dwgID":"0fedb731-e343-45e0-9bcb-12b25fcf16da","note":"https://my.matterportvr.cn/show/?m=fdzfRGMJLjQ&sr=.24,.62&ss=92&play=1&qs=1"},
                        {"pltCode":9,"impCode":2,"macCode":18772,"macName":"P&ID - 2","macType":2,"ctgCode":6,"name":"111","indoorAddr":null,"indoorID":null,"dwgID":"09baf001-502e-422b-8e8c-68fb523285ef","note":null},
                        {"pltCode":9,"impCode":2,"macCode":18773,"macName":"P&ID - 3","macType":2,"ctgCode":6,"name":"P-040-04","indoorAddr":null,"indoorID":null,"dwgID":"411edc30-31e5-437b-851d-9c3bc9aac818","note":"https://my.matterportvr.cn/show/?m=fdzfRGMJLjQ&play=1&qs=1&sr=-.08,1.24&ss=81&play=1&qs=1"},
                        {"pltCode":9,"impCode":2,"macCode":18774,"macName":"P&ID - 4","macType":2,"ctgCode":6,"name":"P-003-03","indoorAddr":null,"indoorID":null,"dwgID":"832e8756-48e0-461e-8a0d-bd7c1bf41900","note":null},
                        {"pltCode":9,"impCode":2,"macCode":18775,"macName":"P&ID - 5","macType":2,"ctgCode":6,"name":"P-003-05","indoorAddr":null,"indoorID":null,"dwgID":"4ddedd32-fe1d-41ab-ac7a-4d41beb3ae6e","note":null},
                        {"pltCode":9,"impCode":2,"macCode":18776,"macName":"P&ID - 6","macType":2,"ctgCode":6,"name":"P-005","indoorAddr":null,"indoorID":null,"dwgID":"16b682a3-fa34-427c-854a-d663a1834aa5","note":null},
                        {"pltCode":9,"impCode":4,"macCode":18777,"macName":"P&ID - 7","macType":2,"ctgCode":6,"name":"P-008-02","indoorAddr":null,"indoorID":null,"dwgID":"6dbedbad-c99f-4073-a082-64c50f403334","note":null},
                        {"pltCode":9,"impCode":4,"macCode":18778,"macName":"P&ID - 8","macType":2,"ctgCode":6,"name":"P-008a-02","indoorAddr":null,"indoorID":null,"dwgID":"84bfc1db-430b-4b81-ba8d-c2fda369e8b9","note":null}
                        ]}`;
            let tempData = JSON.parse(temp);
            this.drwMgtData = tempData.data;

            this.number = tempData.data.length;
            this.itemActive = 0;
            this.$store.commit("changePidMacName", this.drwMgtData[0].macName);
            this.$store.commit("changePidMacNameb", this.drwMgtData[0].name);
        },

        //装置筛选
        PlantChange() {
            // 装置选择后更新装置code 和 名称
            this.$store.commit("changePidPltCode", this.valuePlant);
            this.plantOptions.forEach((Item) => {
                if (Item.pltCode == this.valuePlant) {
                    this.$store.commit("changePidPlantName", Item.pltName);
                }
            });
            this.getMachineApi("", "", "", 1, 1000);
            this.itemActive = null;
        },
        //点击表格行
        ClickTableRow(row, index) {
            this.itemActive = index;
            this.leftListRow = row;
            let data = {
                row: this.leftListRow,
                data: this.drwMgtData,
            };
            this.$store.commit("changePidMacName", row.macName);
            this.$store.commit("changePidMacNameb", row.name);
        },
        ctgVauleSearch() {
            this.getMachineApi("", this.ctgVaule, "", 1, 1000);
        },
        //切换机器或者配管 数据刷新
        radioChange(radio) {
            // 更新状态
            this.ctgVaule = "";

            this.$store.commit("changePidMacType", radio);
            this.getMachineApi("", this.ctgVaule, "", 1, 1000);
        },

        /**
         * 构件削除
         */
        handleSelectNumberDelClick(inIdex, inData) {
            console.log("handleSelectNumberDelClick --- ", inData);
            let tempStrIndex = this.mCheckedMacIdArray.findIndex((e) => {
                return e == inData.id;
            });

            if (tempStrIndex != -1)
                this.mCheckedMacIdArray.splice(tempStrIndex, 1);

            this.macNumberData.splice(inIdex, 1);
        },

        /**
         * 构件多选
         */
        handleSelectionChange(val) {
            console.log(`handleSelectionChange  ---   ---`);

            this.mCheckedMacIdArray = [];
            this.macNumberData.forEach((le) => {
                let tempindex = val.findIndex((se) => {
                    return le.id == se.id;
                });

                if (tempindex != -1) {
                    le.isSelect = true;
                    this.mCheckedMacIdArray.push(le.id);
                } else le.isSelect = false;
            });

            console.log(
                `handleSelectionChange  ---  end ---`,
                this.macNumberData
            );
        },

        /**
         * 构件单选
         */
        handleCurrentChange(val) {
            this.$emit("handleCurrentChange", val);
        },
    },
    // 创建前状态(里面是操作)
    beforeCreate() { },
    // 创建完毕状态(里面是操作)
    created() {
        this.getPlantApi(1, 1000, true);
    },
    // 挂载前状态(里面是操作)
    beforeMount() { },
    // 挂载结束状态(里面是操作)
    mounted() { },
    // 更新前状态(里面是操作)
    beforeUpdate() { },
    // 更新完成状态(里面是操作)
    updated() { },
    // 销毁前状态(里面是操作)
    beforeDestroy() { },
    // 销毁完成状态(里面是操作)
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.LedtContent {
    width: 100%;
    height: 100%;
    //     background: rosybrown;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    padding: 24px;
}

.form-view {
    box-sizing: border-box;

    .form-row {
        width: 100%;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;

        .seach {
            width: 24px;
            height: 24px;
            border-radius: 4px;
            border: 1px solid #d9d9d9;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .form-row-label {
            color: rgba(0, 0, 0, 0.85);
            //   font-weight: 500;
        }

        .form-row-right-content {
            width: 85%;

            .form-ipt {
                width: 100%;
                height: 24px;

                ::v-deep .el-input__inner {
                    height: 24px;
                    background: #fff;
                }

                ::v-deep .el-input__icon {
                    line-height: 24px;
                }
            }

            .ClearBtn {
                min-width: 66px;
                height: 24px;
                border-radius: 4px;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid #eaeaeb;
                background: #106ebe;
                color: #fff;
                float: right;
            }
        }
    }

    .form-checkbox {
        padding: 0 0 12px 44px;
    }
}

.machine-number {
    //     width: calc(100% - 24px);
    height: calc(80% - 0px);
    border: 1px solid #c3c3c3;
    margin-left: 0px;
    box-sizing: border-box;

    .title {
        width: 100%;
        height: 32px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        background: #e9e9e9;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid rgba(195, 195, 195, 0.3);
    }

    .machine-number-body {
        width: 100%;
        height: calc(100% - 32px);
        overflow: hidden;
        overflow-y: auto;

        .Item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            height: 24px;
            cursor: pointer;
            border-bottom: 1px solid rgba(195, 195, 195, 0.3);
            background: #ffffff;
            transition: 0.5s;

            .ItemID {
                width: 31px;
                height: 24px;
                border-right: 1px solid rgba(195, 195, 195, 0.3);
                display: flex;
                align-items: center;
                justify-content: center;
                color: rgba(0, 0, 0, 0.85);
            }

            .ItemName {
                padding-left: 24px;
                height: 100%;
                color: rgba(0, 0, 0, 0.65);
                display: flex;
                align-items: center;
            }
        }

        .Item:hover {
            background: rgb(255, 241, 240);
        }

        .ItemActive {
            background: rgb(255, 241, 240);
        }
    }
}

.select-number {
    width: calc(100% - 24px);
    height: calc(37% - 0px);
    border: 1px solid #c3c3c3;
    margin-left: 0px;
    box-sizing: border-box;

    .title {
        width: 100%;
        height: 32px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        background: #e9e9e9;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid rgba(195, 195, 195, 0.3);
    }

    .select-number-body {
        width: 100%;
        height: calc(100% - 32px);
        overflow: hidden;
        overflow-y: auto;

        .Item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            height: 24px;
            cursor: pointer;
            border-bottom: 1px solid rgba(195, 195, 195, 0.3);
            background: #ffffff;
            transition: 0.5s;

            .ItemID {
                width: 31px;
                height: 24px;
                border-right: 1px solid rgba(195, 195, 195, 0.3);
                display: flex;
                align-items: center;
                justify-content: center;
                color: rgba(0, 0, 0, 0.85);
            }

            .ItemName {
                padding-left: 24px;
                height: 100%;
                color: rgba(0, 0, 0, 0.65);
                display: flex;
                align-items: center;
            }
        }

        .Item:hover {
            background: rgb(255, 241, 240);
        }

        .ItemActive {
            background: rgb(255, 241, 240);
        }
    }
}

.bh-footer {
    // width: 100%;
    height: 38px;
    background: #e9e9e9;
    display: flex;
    align-items: center;
    justify-content: center;

    //   margin-left: 24px;
    .bh-footer-msg {
        // width: 132px;
        height: 24px;
        line-height: 24px;
        padding-left: 8px;
        border-radius: 4px;
        margin: 0 4px;
    }
}

::v-deep .el-radio {
    margin-right: 24px;
}

::v-deep .el-radio:last-child {
    margin-right: 0;
}
</style>
